<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 
       function ajax( method , url , callback ){
                  var xhr = new XMLHttpRequest();
                  xhr.open( method ,  url );
                  xhr.send();
                  xhr.onreadystatechange = function(){
                        if( xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)){
                              // 成功之后;
                              callback( xhr.responseText );
                        }
                  }
            }
            ajax( "GET" , "./07_ajax.php" , function(data){
                  console.log(data);
            })   



        // 
         function formate( url , data ){                
            var type = "GET";
                if( typeof url === "object" && !(url instanceof Array) ){                      
                    data = url;
                    type = "POST";
                    url = "";
                  }
                  var start = true;
                  for(var key in data){
                        if( type === "GET"){
                             url += (start ? "?" : "&") + key + "=" + data[key] ;
                        }else{
                              url += (start ? "" : "&") + key + "=" + data[key] ;
                        }
                        start = false;
                  }
                  return url;
            }
            function ajax( method , url , callback , data ){
                  var xhr = new XMLHttpRequest();                 
                  xhr.open( method , method.toUpperCase() === "GET" ? formate( url , data ) : url );                  
                  if( method === "POST"){
                        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                  }
                  xhr.send( method.toUpperCase() === "POST" ? formate(data) : null );
                  xhr.onreadystatechange = function(){
                        if( xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)){
                              callback( xhr.responseText );
                        }
                  }
            }
            ajax( "POST" , "./07_ajax.php" , function(data){
                  console.log(data);
            } , {
                  username : "gongyangwuyi"
            }) 
            
            

        // 
        function formate( url , data ){                
                  var type = "GET";
                  if( arguments.length === 1){                     
                        type = "POST";                      
                        data = url;
                        url = "";
                  } 
                  var start = true;
                  for(var key in data){
                        if( type === "GET"){
                              url += (start ? "?" : "&") + key + "=" + data[key];
                        }else if(type === "POST"){
                              url += (start ? "" : "&") + key + "=" + data[key];
                        }
                        start = false;
                  }
                  return url;
            }

            function ajax( method , url , callback , data ){
                  var xhr = new XMLHttpRequest();
                  xhr.open( method , method.toUpperCase() === "GET" ? formate( url , data ) : url );
                  if( method.toUpperCase() === "POST"){
                        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                  }
                  xhr.send( method.toUpperCase() === "POST" ? formate( data ) : null );
                  xhr.onreadystatechange = function(){
                        if( xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)){
                              callback( xhr.responseText )
                        }
                  }
            }        
            

            // 
            function formate( url , data ){                 
                  var type = "GET";
                  if( arguments.length === 1){
                        type = "POST";
                        data = url;
                        url = "";
                  }
                  var start = true;
                  for(var key in data){
                        if( type === "GET"){
                              url += (start ? "?" : "&") + key + "=" + data[key];
                        }else if(type === "POST"){
                              url += (start ? "" : "&") + key + "=" + data[key];
                        }
                        start = false;
                  }
                  return url;
            }
            function ajax( method , url , _callback , data ){
                  if(method === "jsonp"){
                        data = data || {};
                        data.jsonpcallback = data.jsonpcallback ? data.jsonpcallback : "callback";;
                        var script = document.createElement("script");
                        script.src = formate( url , data );
                        document.body.appendChild( script );
                        window[data.jsonpcallback] = function( data ){
                              _callback(data);
                        }
                        script.onload = function(){
                              script.remove();
                        }
                  }else{
                        var xhr = new XMLHttpRequest();
                        xhr.open( method , method.toUpperCase() === "GET" ? formate( url , data ) : url );
                        if( method.toUpperCase() === "POST"){
                              xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                        }
                        xhr.send( method.toUpperCase() === "POST" ? formate( data ) : null );
                        xhr.onreadystatechange = function(){
                              if( xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)){
                                    callback( xhr.responseText )
                              }
                        }
                  }
            }
            ajax("jsonp","https://api.gogoup.com/p1/data/recommend",function(data){
                  console.log(data);
            })


    </script>
</body>
</html>